[图片]
import React, { useRef, useState } from 'react';
import { RuleTree } from '@alipay/techui-rule-tree';
import type { FormInstance } from 'antd';
import { Form, Input, Tag, Tooltip } from 'antd';

export default function App() {
  const [value, setValue] = useState({});
  const formRef = useRef<FormInstance>();

  return (
    <div>
      <p>禁用复制按钮，并且联动删除按钮</p >
      <RuleTree<{ name: string }>
        formRef={formRef}
        onChange={(value) => {
          setValue(value);
        }}
        actionRender={({ removeDom }, action, { index }) => {
          return [
            <Tag
              key={'copy'}
              style={{
                cursor: 'pointer',
              }}
              onClick={() => {
                const data = action.getCurrentRowData();
                action.add({ ...data }, index);
              }}
              color="blue"
            >复制</Tag>,
            <Tooltip key={removeDom.key} title="使用tooltip包裹，使用React.cloneElement修改props">
              {React.cloneElement(removeDom, { disabled: index % 2 === 1 })}
            </Tooltip>,
          ];
        }}
        defaultValue={{
          relation: 'and',
          children: [
            {
              name: 'A',
            },
            {
              name: 'B',
            },
          ],
        }}
      >
        {
          (field) => {
            return (
              <Form.Item noStyle name={[field.name, 'name']} rules={[{ required: true }]}>
                <Input />
              </Form.Item>
            );
          }
        }
      </RuleTree>
      <pre>
        {JSON.stringify(value, null, 2)}
      </pre>
    </div>
  );
}